<template>
  <div>
    <el-row :gutter="20" style="color: ">
      <el-col :span="18" :offset="3">
        <div class="grid-content bg-purple">
          <el-card class="card">
            <el-page-header @back="goBack" content="详情页面">
            </el-page-header>
            <h1 class="book-name" v-html="book.title"></h1>
            <div class="block">
              <div>
                <div class="book-image">
                  <el-image style="width:200px;" :src="book.image"></el-image>
                </div>
                <div class="book-info">
                  <p><span>作者：</span><span v-html="author"></span></p>
                  <p><span>页数:</span><span v-html="book.pages"></span>页</p>
                  <p><span>出版社：</span><span v-html="book.publisher"></span></p>
                  <p><span>系列：</span><span v-html="book.catalog"></span></p>
                  <p><span>价格：</span> <span v-html="book.price"></span>￥</p>
                  <p><span>装订方式：</span><span v-html="book.binding"></span></p>
                  <p><span>isbn13：</span><span v-html="book.isbn13"></span></p>
                </div>
                <div class="score">
                  <div>
                    <p class="score-title">豆瓣评分</p>
                    <p><span class="book-score" v-html="book.score"></span></p>
                    <p class="score-raters"><span v-html="book.numRaters"></span>人参与评分</p>
                  </div>
                </div>
              </div>
            </div>
            <p class="bb">--- 内容简介 ---</p>
            <div class="book-intro" v-html="book.summary"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      book: '',
      author: ''
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getBook()
  },
  methods: {
    async getBook() {
      const { data: res } = await this.$http.get(`book/info/${this.id}`)
      if (res.code !== 200) {
        return this.$message.error('获取图书失败！')
      }
      console.log('res', res)
      this.book = res.book
      console.log('book', this.book)
      const { data: result } = await this.$http.get(`author/info/${this.id}`)
      this.author = result.author.name
      console.log('author', this.author)
    },
    goBack() {
      this.$router.push('/book')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  padding-left: 20px;
  padding-right: 20px;
  // box-shadow:10px 10px 10px rgb(129, 152, 173);
}

.book-name {
  font-weight: 500px;
  border-bottom: 1px solid rgb(238, 225, 225);
  margin-bottom: 5px;
  text-align: center;
}

.block {
  width: 100%;
}
.book-image {
  width: 220px;
  float: left;
}
.book-info {
  width: 50%;
  float: left;
  vertical-align: bottom;
  padding-top: 30px;
}
.score {
  float: left;
  // border:1px solid blue;
  height: 296px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.score > div {
  padding-left: 20px;
  border-left: 1px solid rgb(140, 195, 246);
}
.score .book-score {
  font-size: 20px;
  font-weight: 500px;
}
.score-title,
.score-raters {
  color: rgb(120, 143, 138);
}
.book-info p {
  height: 22px;
  font-size: 16px;
  line-height: 22px;
}
.bb {
  clear: both;
  font-size: 16px;
  font-weight: bold;
}
.book-intro {
  clear: both;
  font-weight: 500px;
}
.book-intro {
  text-indent: 2em;
  color: rgb(82, 86, 87);
}
</style>
